.dialog
  .header
    img.silex-logo-small(src='assets/logo-silex-small.png')
    h1.title
      | Website settings
      button.close-btn(type="button")
  .body
    .left-pane
      ul.tree
        li.general-pane(data-pane="general-pane") General
        li.social-pane(data-pane="social-pane") Social Networks
        li.publish-pane(data-pane="publish-pane") Publish settings
        li.fonts-pane(data-pane="fonts-pane") Fonts
    .right-pane
      .pane.general-pane
        ul
          li
            fieldset
              legend
                h3.title Mobile version
              p
                | Show a different version of your website when the size of the screen is too small for the desktop version.
                | Edit this other version of your website by switching to mobile editor in the menu "view" / "Mobile Editor".
              input#mobilecheck.mobile-check(type="checkbox")
              label(for='mobilecheck') Enable mobile version
          li
            fieldset
              legend
                h3.title Website width
              p
                | This is the width of your website on desktop screens. If you set this number, it will force the width of the sections so leave this empty to set the width by hand in the editor for each section. By default, the sections width and website width is 960.
              input.input-text.input-site-width(type="number", value="", placeholder="Website width (px)")
          li
            fieldset
              legend
                h3.title Website language
              p
                | This is the default language code for this website. Examples: en, fr, es...
              input.input-text.input-lang(type="text", spellcheck="false", value="", placeholder="en")
          li
            fieldset
              legend
                h3.title Website Title
              p
                | Title of the browser window, and title in the search engines results.
                | It is used by search engines to find out what your site is talking about.
                | The title should be a maximum of 70 characters long, including spaces.
              input.input-text.input-title(type="text", value="", placeholder="Untitled website")
          li
            fieldset
              legend
                h3.title Website Description
              p
                | Description displayed by the search engines in search results.
                | It is used by search engines to find out what your site is talking about.
                | It is best to keep meta descriptions between 150 and 160 characters.
              input.input-text.input-description(type="text", value="", placeholder="Description")
          li
            fieldset
              legend
                h3.title Favicon
              p
                | Small image displayed in the browser's address bar and in tabs.
                | The recommended size is 16×16 or 32×32 pixels.
              input.input-url.input-favicon-path(type="text", value="")
              button.browse-favicon-path(type="button") Browse
      .pane.social-pane
        p Meta tags for search engines, Facebook, Google+, Twitter, Linkedin, ... The following settings enable Open Graph and Twitter Cards.
        ul
          li
            fieldset
              legend
                h3.title Title
              p
                | The title of your website displayed when a user shares your website on a social network.
                | Do not include any branding in this title, just eye-catching phrase, e.g. "Learn everything about fishing".
                | Title should be between 60 and 90 characters long.
              input.input-text.input-title(type="text", value="", placeholder="Title")
          li
            fieldset
              legend
                h3.title Description
              p
                | Description displayed when a user shares your website on a social network.
                | Make it catchy, and invite readers to visit your website too, e.g. "Sam's website about fishing, check it out!"
                | Title should be between 60 and 90 characters long.
              input.input-text.input-description(type="text", value="", placeholder="Description")
          li
            fieldset
              legend
                h3.title Image
              p
                | Thumbnail image which is displayed when your website is shared on a social network.
                | The optimal size is 1200×627 pixels. At this size, your thumbnail will be big and stand out from the crowd.
                | But do not exceed the 5MB size limit.
                | If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail.
              p
                | Please enter the full URL here, e.g. "http://mysite.com/path/to/image.jpg"
              input.input-text.input-image-path(type="text", spellcheck="false", value="", placeholder="Image URL")
          li
            fieldset
              legend
                h3.title Twitter account
              p
                | Indicates your Twitter account.
              input.input-text.input-twitter(type="text", spellcheck="false", value="", placeholder="@twitteraccount", pattern="^@*", title="Twitter account name")
      .pane.publish-pane
        ul
          li
            fieldset
              legend
                h3.title Website URL
              p
                | The address where your website will be available after publish.
              input.input-path.input-website-url(type="url", spellcheck="false", value="")
            fieldset
              legend
                h3.title Publication Path -&nbsp;
                  a.help-icon(href="https://github.com/silexlabs/Silex/wiki/Publishing-and-Releasing-Your-Website", title="about Silex publication process", target="blank") Help
              p
                | The folder in which I will publish the website.
                | <b>This folder content will be deleted.</b>
              label.service Service
                select.input-service.input-publication-service(value="")
              label.path Path
                input.input-path.input-publication-path(type="text", spellcheck="false", value="")
              button.browse-publication-path(type="button") Configure
      .pane.fonts-pane
        ul
          li
            fieldset
              legend
                h3.title Embeded Fonts -&nbsp;
                  a.help-icon(href="https://github.com/silexlabs/Silex/wiki/Editor-UI#style-manager", title="about the fonts in silex", target="blank") Help
              p
                | These are the fonts which will be embedded in your website.
              p.ui
                button.add-font-btn Add a font
              div.fonts-list

